<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
		<link type="text/css" href="../css/style.css" rel="stylesheet" media="screen"/>
		<link type="text/css" href="css/index.css" rel="stylesheet" media="screen"/>
		<link rel="subresource" href="../img/navbutton.png" />
		<link rel="subresource" href="../img/navleft.png" />
		<link rel="subresource" href="../img/listArrow.png" />
		<link rel="subresource" href="../img/listArrowSel.png" />
		<link rel="subresource" href="../img/checkbox.png" />
		<link rel="subresource" href="../img/radiobutton.png" />
		<link rel="subresource" href="img/settingIcons.png" />
		<title>Slim3 Webkit Demos</title>
	</head>
	<body>
		<div id="topbar">
			<a id="backbutton"></a>
			<span id="title"></span>
			<a id="rightbutton">SearchIndex</a>
		</div>
		<div id="_mainpage" class="page scroll" data-title="Slim3Webkit Demos">
			<ul class="plainlist">
				<li><a href="#grouplist"><span>grouplist</span></a></li>
				<li class=""><a href="#detail"><span>Title</span></a></li>
				<li class="subtitle"><a href="#detail"><div><span>Title</span><span>Subtitle</span></div></a></li>
				<li class=""><a href="#detail"><img src="img/itunes.png"/><span>Title</span></a></li>
				<li class="subtitle"><a href="#detail"><img src="img/itunes.png"/><div><span>Title</span><span>Subtitle</span></div></a></li>
				<li class=""><span>Title</span></li>
				<li class="subtitle"><div><span>Title</span><span>Subtitle</span></div></li>
				<li class=""><img src="img/itunes.png"/><span>Title</span></li>
				<li class="subtitle"><img src="img/itunes.png"/><div><span>Title</span><span>Subtitle</span></div></li>
			</ul>
		</div>
		<div id="_grouplist" class="page scroll" data-title="grouplist">
			<ul class="grouplist">
				<li><a href="#grouplistvalue1"><span>value1</span></a></li>
				<li><a href="#grouplistvalue2"><span>value2</span></a></li>
			</ul>		
			<span class="grouplistlabel">
				grouplist label
			</span>
			<ul class="grouplist">
				<li class=""><a href="#detail"><span>Title</span></a></li>
				<li class="subtitle"><a href="#detail"><div><span>Title</span><span>Subtitle</span></div></a></li>
				<li class=""><a href="#detail"><span class="grouplistIcon airplaneModeIcon"></span><span>Title</span></a></li>
				<li class="subtitle"><a href="#detail"><span class="i airplaneModeIcon"></span><div><span>Title</span><span>Subtitle</span></div></a></li>
			</ul>
			<p class="grouplistdescription">
				grouplist description<br/>
				multiple lines
			</p>
		</div>
		<div id="_grouplistvalue1" class="page scroll" data-title="grouplist value1">
			<span class="grouplistlabel">
				grouplist label value1
			</span>
			<ul class="grouplist">
				<li class="value1"><div>item</div><div>value</div></li>
				<li class="value1"><a href="#detail"><div>item</div><div>value</div></a></li>
			</ul>
			<ul class="grouplist">
				<li class="value1"><a href="#detail"><span>Title</span><div>value</div></a></li>
				<li class="value1 subtitle"><a href="#detail"><div><span>Title</span><span>Subtitle</span></div><div>value</div></a></li>
				<li class="value1"><a href="#detail"><span class="grouplistIcon airplaneModeIcon"></span><span>Title</span><div>value</div></a></li>
				<li class="value1 subtitle"><a href="#detail"><span class="grouplistIcon airplaneModeIcon"></span><div><span>Title</span><span>Subtitle</span></div><div>value</div></a></li>
			</ul>
			<span class="grouplistlabel">ON / OFF</span>
			<ul class="grouplist">
				<li class="value1"><span>Title</span><div><input type="checkbox" value="airplaneMode" /></div></li>
				<li class="value1 subtitle"><div><span>Title</span><span>Subtitle</span></div><div><input type="checkbox" value="airplaneMode" /></div></li>
				<li class="value1"><span class="grouplistIcon airplaneModeIcon"></span><span>Title</span><div><input type="checkbox" value="airplaneMode" /></div></li>
				<li class="value1 subtitle"><span class="grouplistIcon airplaneModeIcon"></span><div><span>Title</span><span>Subtitle</span></div><div><input type="checkbox" value="airplaneMode" /></div></li>
			</ul>
			<span class="grouplistlabel">multibox</span>
			<ul class="grouplist">
				<li class="value1"><span>Title</span><div><input type="checkbox" value="airplaneMode" name="bbb" class="multibox"/></div></li>
				<li class="value1 subtitle"><div><span>Title</span><span>Subtitle</span></div><div><input type="checkbox" value="airplaneMode" name="bbb" class="multibox"/></div></li>
				<li class="value1"><span class="grouplistIcon airplaneModeIcon"></span><span>Title</span><div><input type="checkbox" value="airplaneMode" name="bbb" class="multibox"/></div></li>
				<li class="value1 subtitle"><span class="grouplistIcon airplaneModeIcon"></span><div><span>Title</span><span>Subtitle</span></div><div><input type="checkbox" value="airplaneMode" name="bbb" class="multibox" /></div></li>
			</ul>
			<span class="grouplistlabel">radio</span>
			<ul class="grouplist">
				<li class="value1"><span>Title</span><div><input type="radio" value="1" name="aaa" checked="checked"/></div></li>
				<li class="value1 subtitle"><div><span>Title</span><span>Subtitle</span></div><div><input type="radio" value="2" name="aaa"/></div></li>
				<li class="value1"><span class="grouplistIcon airplaneModeIcon"></span><span>Title</span><div><input type="radio" value="3" name="aaa"/></div></li>
				<li class="value1 subtitle"><span class="grouplistIcon airplaneModeIcon"></span><div><span>Title</span><span>Subtitle</span></div><div><input type="radio" value="4" name="aaa"/></div></li>
			</ul>
			<ul class="grouplist">
				<li class="value1"><div>Title</div><div><input type="text" placeholder="placeholder"/></div></li>
				<li class="value1 subtitle"><div><span>Title</span><span>Subtitle</span></div><div><input type="text" placeholder="placeholder"/></div></li>
			</ul>
		</div>
		<div id="_grouplistvalue2" class="page scroll" data-title="grouplist value2" onfocus="alert('focus');" onblur="alert('blur');">
			<ul class="grouplist">
				<li class="value2"><div>Title</div><div>value</div></li>
				<li class="value2 subtitle"><div><span>Title</span><span>Subtitle</span></div><div>value</div></li>
			</ul>
			<ul class="grouplist">
				<li class="value2"><a href="#detail"><div>Title</div><div>value</div></a></li>
				<li class="value2 subtitle"><a href="#detail"><div><span>Title</span><span>Subtitle</span></div><div>value</div></a></li>
			</ul>
			<span class="grouplistlabel">ON / OFF</span>
			<ul class="grouplist">
				<li class="value2"><span>Title</span><div><input type="checkbox" value="airplaneMode" /></div></li>
				<li class="value2 subtitle"><div><span>Title</span><span>Subtitle</span></div><div><input type="checkbox" value="airplaneMode" /></div></li>
			</ul>
			<span class="grouplistlabel">multibox</span>
			<ul class="grouplist">
				<li class="value2"><span>Title</span><div><input type="checkbox" value="airplaneMode" name="bbb" class="multibox"/></div></li>
				<li class="value2"><div>Title2</div><div><input type="checkbox" value="airplaneMode" name="bbb" class="multibox"/></div></li>
			</ul>
			<span class="grouplistlabel">radio</span>
			<ul class="grouplist">
				<li class="value2"><span>Title</span><div><input type="radio" value="1" name="aaa" checked="checked"/></div></li>
				<li class="value2"><div>Title2</div><div><input type="radio" value="2" name="aaa"/></div></li>
			</ul>
			<ul class="grouplist">
				<li class="value2"><div>Title</div><div><input type="text" placeholder="placeholder"/></div></li>
				<li class="value2 subtitle"><div><span>Title</span><span>Subtitle</span></div><div><input type="text" placeholder="placeholder"/></div></li>
			</ul>
		</div>
		<div id="_detail" class="page" data-title="detail">
			<a href="#detail" id="detaillabel">detail</a>
		</div>
		<div class="toolbar">
			<div><a href="javascript:void(0);"><img src="img/martini.png"/></a></div>
			<div><a href="javascript:void(0);"><img src="img/wine.png"/></a></div>
			<div><a href="javascript:void(0);"><img src="img/bow.png"/></a></div>
			<div><a href="javascript:void(0);"><img src="img/butterfly.png"/></a></div>
			<div><a href="javascript:void(0);"><img src="img/ghost.png"/></a></div>
		</div>
		<script type="text/javascript" src="../js/slim3webkit.js"></script>
		<script type="text/javascript" src="js/index.js"></script>
	</body>
</html>